<template>
  <div class="person">
    <h1>vue3生命周期</h1>
    <h2>当前求和为:{{ sum }}</h2>
    <button @click="add">sum+1</button>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeMount, onBeforeUpdate, onUpdated, onUnmounted, onBeforeUnmount } from 'vue';
let sum = ref(0)

function add() {
  sum.value += 1
}


//创建
console.log('创建');

//挂载
onBeforeMount(() => { console.log('挂载前'); })
onMounted(() => { console.log('挂载完毕'); })

onBeforeUpdate(() => {
  console.log('更新前');
})
onUpdated(() => { console.log('更新完毕'); })

//卸载
onBeforeUnmount(() => {
  console.log('卸载前');
})
onUnmounted(() => {
  console.log('卸载完毕');
})
</script>

<style scoped>
.person {
  background-color: #444fb4;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

li {
  font-size: 20px;
}

button {
  margin: 0 10px auto;
}
</style>
